<template>
	<div class="wrapper">
		<title-decorate titleName="水质监测"/>
		<div class="my-chart" id="waterMonitoringChart"></div>
	</div>
</template>

<script>
import TitleDecorate from "../../components/TitleDecorate.vue";
import * as echarts from "echarts";
import {BigScreen} from "../../datastore/BigScreen";

export default {
	components: {TitleDecorate},
	props: {},
	data() {
		return {
			title_arr:[],
			ph_arr:[],
			tur_arr:[],
			res_arr:[],
		};
	},
	watch: {},
	computed: {},
	methods: {
		drawCharts() {
			var that = this;
			var chartDom = document.getElementById("waterMonitoringChart");
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				tooltip: {
					trigger: "axis",
				},
				legend: {
					data: ["PH值", "浊度", "余氯"],
					itemHeight: 5,
					itemWidth: 16,
					show: "true",
					textStyle: {
						color: "#ffffff",
						fontSize: 11,
					},
					itemStyle: {
						opacity: 0,
					},
					right: 20,
					top: 20,
				},
				grid: {
					top: 50,
					bottom: 35,
					right: 20,
					left: 35,
				},
				xAxis: {
					type: "category",
					boundaryGap: true,
					data: that.title_arr,
					axisLabel: {
						color: "#ffffff",
						fontSize: 11,
					},
					axisTick: {
						alignWithLabel: true,
					},
				},
				yAxis: {
					name: "单位：%",
					nameLocation: "end",
					nameTextStyle: {
						color: "#ffffff",
						fontSize: 11,
					},

					axisLabel: {
						color: "#ffffff",
						fontSize: 11,
					},
					splitLine: {
						lineStyle: {
							color: "#ffffff1a",
						},
					},
				},
				series: [
					{
						name: "PH值",
						data: that.ph_arr,
						color: "rgba(91, 143, 249, 0.8)",
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(91, 143, 249, 0.8)",
								},
								{
									offset: 1,
									color: "rgba(91, 143, 249, 0)",
								},
							]),
						},
						type: "line",
						showSymbol: false,
						smooth: true,
					},
					{
						name: "浊度",
						data: that.tur_arr,
						color: "rgba(255, 157, 10, 0.8)",
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(255, 157, 10, 0.8)",
								},
								{
									offset: 1,
									color: "rgba(255, 157, 10, 0)",
								},
							]),
						},
						type: "line",
						showSymbol: false,
						smooth: true,
					},
					{
						name: "余氯",
						data: that.res_arr,
						color: "rgba(1, 198, 75, 0.8)",
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(1, 198, 75, 0.8)",
								},
								{
									offset: 1,
									color: "rgba(1, 198, 75, 0)",
								},
							]),
						},
						type: "line",
						showSymbol: false,
						smooth: true,
					},
				],
			};

			option && myChart.setOption(option);
		},
	},
	created() {
	},
	mounted() {
		var that = this;
		new BigScreen(this).getMonitorList({},(res)=>{
			that.title_arr = res.datas.title_arr;
			that.ph_arr = res.datas.ph_arr;
			that.tur_arr = res.datas.tur_arr;
			that.res_arr = res.datas.res_arr;
			this.drawCharts();
		})
	},
};
</script>
<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.my-chart {
		width: 100%;
		flex: 3;
		margin-top: -10px;
	}
}
</style>